Modal モーダル UI

特徴

TODO

gif 置く

ユーザーにネイティブのダイアログウィンドウのように動作することを伝える

ヘッダーのタイトルに付与してモーダルの目的伝える

XやESCで閉じることができる

ライブラリ調査メモ

要件

accessible

focusがいい感じに移動してくれる

モーダル触っている時、後ろがscrollしない

ライブラリ

star多いもので、良さそうなものをチェック

Reactじゃないと使えないので調査は、あとで。

focus周りが整ってないので、利用は無さそう

後ろrockしてくれないライブラリと一緒に使ったり、スクラッチモーダルと組み合わせたりできる。

Safariなどでも動くのが良い。

依存無し

accessibleで良さげ→✗

focus周りで、Safariの挙動にバグあるらしい(Issues参照)

scroll周りの挙動どんなか不明

accessibleバグあるなら使う理由ないので、調査しない。

accessibleで良さげ

Mac Safariがクラッシュする気がする。(13)

Mac Safari のtab移動が一部おかしい。(15)

Google Chromeがサポートしていて安心。挙動も一番安定してる。

accessible

mac Chrome 101

Mac Safari 15 問題なし

そもそも、Safariは、Tab移動の設定オンにする必要あり。

iOS Safari 15 基本問題なし

Dialog内に、input formあると、ブラウザの挙動で画面拡大されるのがストレス。Web kit Chromeでも起きるので、Webkitの問題かな？

Android Chrome 問題なし

Safari 13 問題なし

scroll周り

↑の組み合わせ検証

参考